<template>
  <div style="width: 100%; height: 713px; background-color: #f2f5f4">
    <van-nav-bar title="网易严选" name="wap-home-o" @click-left="onClickLeft">
      <template #left>
        <van-icon name="wap-home-o" size="28"  @click="tohome"/>
      </template>
      <template #right>
        <van-icon name="search" size="28" />
        &nbsp;&nbsp;&nbsp;&nbsp;
        <van-icon name="cart-o" color="#1989fa" size="28" />
      </template>
    </van-nav-bar>
    <div class="box">
      <div class="centerbox">
        <img src="./image/login-img1.png" alt="" />
      </div>
      <div class="box2">
        <div class="box3">
          <van-button
            type="danger"
            size="large"
            class="button1"
            @click="gotologindetail"
            ><span class="iconfont icon-shouji"></span
            >手机号快捷登录</van-button
          >
          <van-button type="default" size="large" class="button1" @click="gotorefister">
            注册</van-button
          >
        </div>
      </div>
    </div>
    <div class="footer">
      <ul class="footer-box">
        <li><span class="iconfont icon-weixin"></span> &nbsp;微信</li>
        <li><span class="iconfont icon-QQ"></span>&nbsp; QQ</li>
        <li><span class="iconfont icon-weibo"></span>&nbsp;微博</li>
      </ul>
    </div>
  </div>
</template>
 

<script  lang="ts">
import { useRouter } from "vue-router";
export default {
  setup() {
    // 路由
    const router = useRouter();
    // 点击登录按钮跳到登录详情页
    function gotologindetail() {
      router.push("/logindetail");
    }
    // 点击注册按钮跳转到注册界面
    function gotorefister(){
      router.push("/register")
    }
    function tohome(){
      router.push("/home")

    }
    return {
      gotologindetail,
      gotorefister,
      tohome
    };
  },
};
</script>

<style scoped lang="less">
:deep(.van-nav-bar__title) {
  font-size: 20px;
}
:deep(.van-nav-bar__content) {
  border-bottom: 1px solid #ccc;
}
.box {
  margin-top: 60px;
  width: 400px;
  height: 303px;
  // overflow: hidden;

  .centerbox {
    width: 100%;
    height: 133px;
    overflow: hidden;
    margin-top: 10px;
    img {
      width: 142px;
      height: 48px;
      display: block;
      margin-top: 40px;
      margin-left: 110px;
    }
  }
  .box2 {
    width: 100%;
    height: 170px;
    // background-color: yellow;
    .box3 {
      width: 100%;
      height: 150px;
      margin-top: 10px;
      // background-color: green;
      // overflow: hidden;
      .button1 {
        width: 357px;
        margin-left: 10px;
        margin-top: 30px;
      }
      .button2 {
        width: 357px;
        margin-left: 10px;
        margin-top: 10px;
      }
    }
  }
}
.footer {
  width: 400px;
  height: 21px;
  // background-color: red;
  margin-top: 30px;
  .footer-box {
    width: 300px;
    height: 100%;
    // background-color: blue;
    margin: 0 auto;
    display: flex;
    li {
      width: 30%;
      height: 100%;
      // background-color: pink;
      text-align: center;
      line-height: 21px;
      color: #7f7f7f;
      font-size: 18px;
    }
  }
}
</style>